<template>
	<view>
		<!-- 搜索 -->
		<view class="page-width">
			<app-search-for :value="value"></app-search-for>
		</view>
		<view class="coll-coupon" v-for="(item,index) in enimgs" :key="index" @click="jump(item.url)">
			<image class="coll-image" :src="item.icon_url" mode=""></image>
		</view>
		<!-- 一排三个说明视频 -->
		<view class="subject">
			<view class="subject-item" v-for="(item,index) in videolist" :key="index" @click="isvideo(index)">
				<image :src="item.cover_pic" mode="" class="subject-image"></image>
				<image :src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'" mode=""
					class="subject-play"></image>
				<view class="subject-title u-line-2">
					{{item.title}}
				</view>
			</view>
		</view>

		<video v-if="isvshow" :autoplay="true" :loop="true" :src="videolist[curindex].vdetail[0].url"
			style="position: fixed;top: 0;left: 0;width: 100%;height: 460rpx;z-index: 1600;" controls></video>
		<view class="close" @click="closev" v-if="isvshow">
			<image class="image" src="../../../static/image/icon/video-close.png"></image>
		</view>
		<!-- <view class="pt-shop">
			<view class="pt-shop-item" v-for="(item,index) in list" :key="index" @click="goJoin(item.pintuan_order_id)">
				<view class="pt-goods">
					<view class="pt-goods-item">
						<image class="image" :src="item.detail[0].goods_info.cover_pic"></image>
						<view class="group ed">已拼团</view>
						<view class="name u-line-1">{{item.detail[0].goods_info.name}}</view>
					</view>
					<view class="pt-goods-item">
						<image class="image" :src="item.detail[0].goods_info.cover_pic"></image>
						<view class="group ing">待拼团</view>
						<view class="surplus">
							<app-surplus-time :surplus_date_time="item.end_date_time"></app-surplus-time>
						</view>
						<view class="name u-line-1">{{item.detail[0].goods_info.name}}</view>
					</view>
				</view>
				<view class="pt-goods-desc line2">
					{{item.detail[0].goods_info.name}}
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无拼团
			</view>
		</view> -->
		<view class="app-pt-index">
			<view class="app-list safe-area-inset-bottom" v-if="goods_list.length>0">
				<view class="bd-item dir-left-nowrap" :class="{'bd-item-border': index !== goods_list.length - 1}"
					v-for="(item, index) in goods_list" :key="index" @click="route_go(item)">
					<view class="pt-shop-item" v-if="item.isab == 0">
						<view class="pt-title" v-if="item.goodsList.pintuanGoods.title != null">
							{{item.goodsList.pintuanGoods.title}}
						</view>
						<view class="pt-goods">
							<view class="pt-goods-item" v-for="(items,indexs) in 2" :key="indexs" v-if="indexs < 2">
								<view class="ptimage">
									<image class="image" :src="item.cover_pic"></image>
									<view class="no-goods"
										v-if="item.goodsList.groups[0].attr[0].stock == 1 && indexs < 1">
										<view class="no-title">
											已团
										</view>
									</view>
									<view class="no-goods"
										v-if="item.goodsList.groups[0].attr[0].stock == 0 && indexs < 2">
										<view class="no-title">
											已团
										</view>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view class="bd-name u-line-2">{{item.name}}</view>
						</view>
						<view class="price dir-top-nowrap main-right">
							<view class="app-price dir-left-nowrap cross-bottom">
								<text class="app-now-price" :class="themeObject.color">定金：</text>
								<text class="app-symbol app-now-price" :class="themeObject.color"
									v-if="item.price > 0">{{item.price}}</text>
								<text class="app-now-price" :class="themeObject.color" v-else>免费</text>
							</view>
						</view>
						<view class="pt-goods-desc line2" v-if="item.subtitle != ''">
							{{item.subtitle}}
						</view>
						<view class="pt-goods-desc line2">
							<view v-if="item.goodsList.groups[0].attr[0].stock == 2" class="app-button"
								:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团
							</view>
							<view v-else-if="item.goodsList.groups[0].attr[0].stock == 1" class="app-button"
								:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去拼团
							</view>
							<view v-else-if="item.goodsList.groups[0].attr[0].stock == 0"
								style="background: #DCDCDC;color: #fff" class="app-button">
								已售罄</view>
							<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
						</view>
					</view>
					<view class="pt-shop-item" v-if="item.isab == 1">
						<view class="pt-title" v-if="item.goodsList.pintuanGoods.title != null">
							{{item.goodsList.pintuanGoods.title}}
						</view>
						<view class="pt-goods">
							<view class="pt-goods-item" v-for="(items,indexs) in item.goodsList.groups[0].attr"
								:key="indexs" v-if="indexs < 2">
								<view class="ptimage">
									<image class="image" :src="items.pic_url || item.cover_pic"></image>
									<view class="no-goods" v-if="items.stock == 0">
										<view class="no-title">
											已团
										</view>
									</view>
								</view>
								<view class="name u-line-1">{{items.attr_list[0].attr_name}}</view>
								<view class="price u-line-1">￥{{items.price}}</view>
							</view>
						</view>
						<view class="pt-goods-desc line2">
							AB拼团
						</view>
						<view class="pt-goods-desc line2">
							<view
								v-if="item.goodsList.groups[0].attr[0].stock > 0 && item.goodsList.groups[0].attr[1].stock > 0 && item.goodsList.groups[0].attr[1].stock > 0"
								class="app-button"
								:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团
							</view>
							<view
								v-else-if="item.goodsList.groups[0].attr[0].stock > 0 || item.goodsList.groups[0].attr[1].stock > 0"
								class="app-button"
								:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去拼团
							</view>
							<view
								v-else-if="item.goodsList.groups[0].attr[0].stock == 0 || item.goodsList.groups[0].attr[1].stock == 0 && item.goodsList.groups[0].attr[1].stock == 0"
								style="background: #DCDCDC;color: #fff" class="app-button">已售罄
							</view>
							<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nopt" v-else>
				等待，有惊喜哦
			</view>
			<!-- 返回顶部 -->
			<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
				<image @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				videolist: [],
				curindex: 0,
				vtotop: 0,
				isvshow: false,
				imgprefix: this.$siteInfo.imgroot,
				list: [],
				page: 1,
				limit: 20,
				page_count: 1,
				total_count: 1,
				enimgs: [],
				goods_list: [],
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0
			}
		},
		onLoad() {
			// this.imgprefix = this.$siteInfo.imgroot
			// this.waitspe(2)
			this.loadlist()
			this.allReq(229)
			this.requestList()
		},
		onShow() {
			if (this.vtotop == 0) {
				uni.createSelectorQuery().select('.subject').boundingClientRect((res) => {
					if (res && res.top > 0) {
						var navbarInitTop = parseInt(res.top);
						this.vtotop = navbarInitTop
					}
				}).exec();
			}
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				// this.waitspe(2)
				this.requestList()
			} else {
				this.page = 1
				// this.waitspe(2)
				this.requestList()
			}
		},
		onPageScroll(e) {
			let self = this
			var scrollTop = parseInt(e.scrollTop);
			if (self.isvshow == true) {
				if (scrollTop > 0) {
					self.isvshow = true
				} else {
					self.isvshow = false
				}
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				themeObject: function(state) {
					let theme = state.mallConfig.mall.setting.theme_color;
					return {
						back: theme + '-m-back ' + theme,
						theme: theme,
						color: theme + '-m-text ' + theme,
						sBack: theme + '-s-back ' + theme
					}
				}
			})
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		methods: {
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(url){
				uni.navigateTo({
					url:url
				})
			},
			goJoin(id) {
				uni.navigateTo({
					url: `/plugins/pt/detail/detail?id=${id}`
				})
			},
			route_go(data) {
				uni.navigateTo({
					url: `/plugins/pt/goods/goods?goods_id=${data.id}`,
				});
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 30
					}
				}).then((res) => {
					if (res.code == 0) {
						if (pid == 229) {
							this.enimgs = res.data.list
						}
					}
				}).catch(() => {

				})
			},
			waitspe(id) {
				this.$request({
					url: this.$api.pt.order,
					data: {
						pintuan_status: id,
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					// console.log(this.list);
					this.page_count = res.data.pagination.page_count
					this.total_count = res.data.pagination.total_count
				})
			},
			loadlist() {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: 6,
						limit: 3
					}
				}).then((res) => {
					this.videolist = res.data.list
				}).catch(err => {

				})
			},
			async requestList(status) {
				this.$showLoading();
				const r = await this.$request({
					url: this.$api.pt.goods,
					data: {
						page: this.page,
						cat_id: 0,
					}
				});
				// console.log(r);
				if (r.code === 0) {
					this.$hideLoading();
					let {
						pagination,
						list
					} = r.data;
					this.goods_list = 1 === status ? this.goods_list.concat(list) : list;
					this.page_count = pagination.page_count;
				} else {
					this.$hideLoading();
				}
			},
			isvideo(index) {
				this.curindex = index
				this.isvshow = true
			},
			closev() {
				this.isvshow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	/* 领券 */
	.coll-coupon {
		width: 686rpx;
		height: 196rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 24rpx auto;
		border-radius: 32rpx;
	}

	.coll-coupon .coll-image {
		width: 100%;
		height: 100%;
	}

	.coupon-video {
		width: 686rpx;
		height: 396rpx;
		margin: 32rpx auto;
		display: flex;
		justify-content: space-between;
		border-radius: 16px;
	}

	.coupon-video .video-item {
		width: 332rpx;
		height: 396rpx;
		border-radius: 32rpx;
		overflow: hidden;
		background: #FFFFFF;
		position: relative;
	}

	.coupon-video .video-item .video-cover {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.coupon-video .video-item .video-play {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.coupon-video .video-item .video-explain {
		position: absolute;
		width: 332rpx;
		height: 62rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 0 0 32rpx 32rpx;
		backdrop-filter: blur(9px);
		bottom: 0;
		left: 0;
		text-align: center;
		color: #FFFFFF;
		line-height: 62rpx;
		font-size: 24rpx;
	}

	// 一排三个说明视频
	.subject {
		width: 686rpx;
		// height: 230rpx;
		margin: 32rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.subject-item {
			width: 208rpx;
			height: 176rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.subject-image {
				width: 100%;
				height: 122rpx;
			}

			.subject-play {
				position: absolute;
				width: 54rpx;
				height: 54rpx;
				top: 61rpx;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.subject-title {
				margin: 2rpx 16rpx;
				font-size: 22rpx;
				color: #333333;
			}
		}
	}

	.close {
		position: fixed;
		top: #{26upx};
		right: #{26upx};
		width: #{70upx};
		height: #{70upx};
		z-index: 1606;
		border-radius: #{35upx};
		background-color: rgba(51, 51, 51, .4);

		.image {
			width: #{26upx};
			height: #{26upx};
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	/* 拼团 */
	/* .pt-shop {
		width: 686rpx;
		height: 476rpx;
		margin: 0 auto;
	}

	.pt-shop-item {
		width: 686rpx;
		padding: 32rpx;
		margin: 32rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pt-goods {
		display: flex;
		justify-content: space-between;
	}

	.pt-goods-item {
		width: 296rpx;
		height: 296rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.pt-goods-item .image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.pt-goods-item .group {
		width: 140rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		border-radius: 26rpx 0px 0px 26rpx;
		position: absolute;
		top: 24rpx;
		right: 0;
	}

	.pt-goods-item .group.ed {
		background: #342B2A;
	}

	.pt-goods-item .group.ing {
		background: #EB5757;
	}

	.pt-goods-item .surplus {
		width: 216rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 26rpx 0 0 26rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		position: absolute;
		top: 88rpx;
		right: 0;
	}

	.pt-goods-item .name {
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 24rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.pt-goods-desc {
		padding: 26rpx 0 0;
		color: #333333;
		font-size: 24rpx;
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	} */

	.app-pt-index {
		background-color: #f7f7f7;
		min-height: 100vh;

		.app-list {
			// margin-top: #{20rpx};
		}
	}

	.bd-item-border {
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.bd-name {
		font-size: #{28rpx};
		color: #353535;
		margin-top: #{5rpx};
	}

	.bd-item {
		padding: #{24rpx 24rpx 14rpx 24rpx};
		background-color: #ffffff;
		position: relative;
	}

	.member-price {
		margin-top: 5upx;
	}

	// ab拼团
	.pt-shop-item {
		width: 686rpx;
		// padding: 32rpx;
		margin: 32rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pt-shop-item .item {
		width: 100%;
		height: 100%;
	}

	.pt-title {
		font-size: 32rpx;
		padding: 20rpx 0;
		font-weight: 600;
	}

	.pt-goods {
		display: flex;
		justify-content: space-between;
	}

	.pt-goods-item {
		// width: 296rpx;
		// height: 296rpx;
		width: 324rpx;
		// height: 324rpx;
		// position: relative;
		border-radius: 16rpx;
		overflow: hidden;

		.ptimage {
			width: 324rpx;
			height: 324rpx;
			position: relative;
		}

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.pt-goods-item .image {
		width: 324rpx;
		height: 324rpx;
		/* position: absolute;
		top: 0;
		left: 0; */
	}

	.pt-goods-item .name {
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		// text-align: center;
		font-size: 24rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.pt-goods-item .price {
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		// text-align: center;
		font-size: 28rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.app-button {
		font-size: #{26rpx};
		color: #ffffff;
		width: #{180rpx};
		height: #{64rpx};
		line-height: #{64rpx};
		text-align: center;
		/* #ifndef MP-TOUTIAO */
		padding: 0 #{49rpx};
		/* #endif */
		border-radius: #{32rpx};
	}

	.default-button {
		background: linear-gradient(140deg, #ffa360, #ff5c5c);
	}

	.pt-goods-desc {
		padding: 26rpx 0 0;
		color: #333333;
		font-size: 24rpx;
	}

	// 拼团
	.price {
		/* width: #{458-180rpx};
		height: #{105rpx}; */
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		font-size: 28rpx;
	}

	.app-now-price {
		font-size: #{30rpx};
		margin-right: #{12rpx};
	}

	.app-symbol:before {
		content: '￥';
		font-size: #{30rpx};
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
